<%--
  Created by IntelliJ IDEA.
  User: yudejie2020
  Date: 2022/6/16
  Time: 20:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理-登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="static/layui/css/layui.css" media="all">

    <%--    <!--[if lt IE 9]>--%>
    <%--    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>--%>
    <%--    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>--%>
    <%--    <![endif]-->--%>

    <style>
        html, body {width: 100%;height: 100%;overflow: hidden}
        body {background: #0b1318;}
        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
        .layui-container {width: 100%;height: 100%;overflow: hidden}
        .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
        .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
        .logo-title h1 {color: #4a04f1;font-size:25px;font-weight:bold;}
        .login-form {background-color: #13171a;border:1px solid #181d21;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #13171a;}
        .login-form .layui-form-item {position:relative;}
        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color: #6460c0;}
        .login-form .layui-form-item input {padding-left:36px;}
        .captcha {width:60%;display:inline-block;}
        .captcha-img {display:inline-block;width:34%;float:right;}
        .captcha-img img {height:34px;border:1px solid #a0eef1;height:36px;width:100%;}
        .cardDiv{
            width: 100px;
            height: 40px;
            /*padding-top: 20px;*/
            /*padding-left: 0px;*/
            float: left;
        }
        .codeDiv{
            width: 100px;
            height: 45px;
            /*padding-top: 20px;*/
            padding-left: 70px;
            float: left;
        }
        .cardInput{
            width: 124px;
            height: 40px;
            font-size: 15px;
            /*border-radius: 0.5em 0em 0em 0.5em;*/
        }
        .codeInput{
            width: 120px;
            height: 40px;
            font-size: 15px;
            /*border-radius: 0em 0.5em 0.5em 0em;*/
            /*验证码样式*/
            font-family: Arial;
            font-style: italic;
            font-weight: bold;
            /*border: 0;*/
            letter-spacing: 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form">
                <div class="layui-form-item logo-title">
                    <h1>心理测试系统 </h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" ></label>
                    <input id="loginUsername" type="text" name="searchUserName" lay-verify="required" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="admin" >
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" ></label>
                    <input id="loginPassword" type="password" name="searchPassword" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" value="123456" >
                </div>
                <div class="layui-form-item">
<%--                    <div><label class="layui-icon layui-icon-vercode" ></label></div>--%>
                    <div class="cardDiv" >
                        <input id="loginCard" class="layuui-input cardInput" type="text" name="card" placeholder="输入验证码">
                    </div>
                    <div class="codeDiv" >
                        <input id="loginCode" class="layui-input codeInput" type="button" style="text-align: center">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit lay-filter="testFormFilter">登录</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="static/layui/layui.js" charset="utf-8"></script>
<script src="lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script>

    //防止在iframe里面嵌套显示登录界面
    if(window!=top){
        top.location.href=location.href;
    }
    layui.use(['form','layer','jquery'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        //各种基于事件的操作，下面会有进一步介绍
        // 粒子线条背景
        $(document).ready(function(){
            $('.layui-container').particleground({
                dotColor:'#7ec7fd',
                lineColor:'#1d303f'
            });
        });
        $(function (){
            //页面初始化生成验证码
            window.onload=createCode('#loginCode');
            //验证码切换
            $('#loginCode').click(function (){
                createCode('#loginCode');
            });
            //注册事件
            // $('#loginRegister').click(function (){
            //     alert("敬请期待。。。。");
            // });
        });
        // 生成验证码
        function createCode(codeID) {
            var code = "";
            // 验证码长度
            var codeLength = 4;
            // 验证码dom元素
            var checkCode = $(codeID);
            // 验证码随机数
            var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
                'S','T','U','V','W','X','Y','Z'];
            for (var i = 0;i < codeLength; i++){
                // 随机数索引
                var index = Math.floor(Math.random()*36);
                code += random[index];
            }
            // 将生成的随机验证码赋值
            checkCode.val(code);
        }
        // 校验验证码、用户名、密码
        function validateCode(inputID,codeID) {
            var inputCode = $(inputID).val().toUpperCase();
            var cardCode = $(codeID).val();
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            if ($.trim(loginUsername) == '' || $.trim(loginUsername).length<=0){
                layer.msg("用户名不能为空");
                return false;
            }
            if ($.trim(loginPassword) == '' || $.trim(loginPassword).length<=0){
                layer.msg("密码不能为空");
                return false;
            }
            if (inputCode.length<=0){
                layer.msg("验证码不能为空");
                return false;
            }
            if (inputCode != cardCode){
                layer.msg("请输入正确验证码");
                return false;
            }
            return true;
        }


        form.on('submit(testFormFilter)', function(data){
            if (!validateCode('#loginCard','#loginCode')){
                //阻断提示
            }else{

            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //提交表单数据
            //登录等待
            var loading=layer.msg('正在登录请稍后。。。',{icon:1,shade:0.3,time:0})
            $.ajax({
                url:"${pageContext.request.contextPath}/login.do",
                type: "POST",
                dataType:"JSON",
                //data:data.field,
                data:JSON.stringify(data.field),//将js对象转换成json字符串
                contentType: 'application/json;charset=UTF-8',
                success:function (ret) {
                    if(ret.code==0){
                        //登录成功之后，去主页
                        window.location.href="views/home.jsp";
                    }else
                    {
                        layer.msg(ret.msg,{icon: 5});
                    }

                }
            })
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</body>
</html>
